<!--
 * @Author: your name
 * @Date: 2021-11-26 09:07:40
 * @LastEditTime: 2022-01-12 15:07:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \system_authority_manage\src\components\OrganTreeSelect.vue
-->
<!-- 树状选择器 -->
<template>
  <treeselect
    v-model="selectedData"
    :multiple="multiple"
    :options="options"
    :normalizer="normalizer"
    :default-expand-level="2"
    :value-consists-of="valueConsistsOf"
    placeholder="请选择"
    noChildrenText=""
    noResultsText="暂无数据"
    noOptionsText="暂无数据"
    :flat="flat"
    :sortValueBy="sortValueBy"
    class="org-tree-select"
    size="small"
    :disabled="true"
    @select="onSelect" />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listRecursiveOrgan } from '@api/modules/system.js'
export default {
  name: 'OrganTreeSelect',
  components: {
    Treeselect,
  },
  emits: ['change'],
  model: {
    prop: 'value',
    event: 'valueChange',
  },
  props: {
    // 接收绑定参数
    value: [String, Array],
    multiple: {
      type: Boolean,
      default: false,
    },
    flat: Boolean,
    valueConsistsOf: {
      type: String,
      default() {
        return 'ALL'
      },
    },
    sortValueBy: {
      type: String,
      default() {
        return 'ORDER_SELECTED'
      },
    },
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.selectedData = newVal || null
        } else {
          if (this.multiple) {
            this.selectedData = []
          } else {
            this.selectedData = null
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      selectedData: null,
      options: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.queryOutVOS,
        }
      },
    }
  },
  created() {
    this.initdata()
  },
  methods: {
    onSelect(node) {
      this.$emit('valueChange', node.id)
      this.$emit('change', node.id)
    },
    /* 初始化单位 */
    initdata() {
      listRecursiveOrgan().then(res => {
        if (res.status === 200) {
          this.options = res.data || []
          this.setName(this.options)
        }
      })
    },
    setName(datas) {
      // 遍历树  获取id数组
      for (const i in datas) {
        if (datas[i].queryOutVOS.length === 0) {
          datas[i].queryOutVOS = undefined
        }
        if (datas[i].queryOutVOS) {
          // 存在子节点就递归
          this.setName(datas[i].queryOutVOS)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.org-tree-select.vue-treeselect--disabled {
  ::v-deep .vue-treeselect__control {
    border-color: #e4e7ed !important;
    background-color: #f5f7fa !important;
    height: 30px !important;
    padding-left: 15px !important;
    border-radius: 0px !important;

    .vue-treeselect__value-container {
      font-size: 13px;

      .vue-treeselect__single-value {
        color: #c0c4cc;
        line-height: 30px !important;
      }
    }
  }

  cursor: not-allowed !important;
}
</style>
